<template>
<div class="circle">
  <div class="menu garden" @click="skipTo('garden')">
    <img src="../../assets/images/guide/garden.png">
    <div class="link_point"></div>
    <div class="link_point"></div>
    <div class="link_point--last">
      <div class="link_point"></div>
    </div>
    <div class="menu_title">
      <div>
        <span>园区安防</span>
        <span>平台</span>
      </div>
    </div>
  </div>
  <div class="menu more" @click="skipTo('more')">
    <img src="../../assets/images/guide/more.png">
    <div class="link_point"></div>
    <div class="link_point"></div>
    <div class="link_point--last">
      <div class="link_point"></div>
    </div>
    <div class="menu_title">
      <div>
        <span style="font-weight: bold;font-size:16px;">. . .</span>
      </div>
    </div>
  </div>
  <div class="menu parking" @click="skipTo('parking')">
     <img src="../../assets/images/guide/parking.png">
    <div class="link_point"></div>
    <div class="link_point"></div>
    <div class="link_point--last">
      <div class="link_point"></div>
    </div>
    <div class="menu_title">
      <div>
        <span>停车计费</span>
        <span>平台</span>
      </div>
    </div>
  </div>
  <div class="menu driverless" @click="skipTo('driverless')">
    <img src="../../assets/images/guide/driverless.png">
    <div class="link_point"></div>
    <div class="link_point"></div>
    <div class="link_point--last">
      <div class="link_point"></div>
    </div>
    <div class="menu_title">
      <div>
        <span>无人车管理</span>
        <span>平台</span>
      </div>
    </div>
  </div>
  <div class="menu avp" @click="skipTo('avp')">
    <img src="../../assets/images/guide/avp.png">
    <div class="link_point"></div>
    <div class="link_point"></div>
    <div class="link_point--last">
      <div class="link_point"></div>
    </div>
    <div class="menu_title">
      <div>
        <span>AVP平台</span>
      </div>
    </div>
  </div>
  <div class="aureole">

  </div>
  <div class="ripple">
    <div class="ripple_inner"></div>
  </div>
</div>
</template>
<script setup>
const skipTo = (system) =>{
   const systemUrl = window.g.guide2[system];
   if(systemUrl) window.open(systemUrl, '_blank');
 }
</script>
<style scoped>
.circle {
  width: 129vh;
  height: 10vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu_title {
  width: 10.65vh;
  height: 7vh;
  border-radius: 0 0 5.325vh 5.325vh;
  position: absolute;
  top: 6.8vh;
  left: calc(50% - 5.2vh);
  display: flex;
  overflow: hidden;
}
.menu_title > div {
  width: 100%;
  height: 3.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  background: linear-gradient(
    90deg,
    rgba(25, 59, 116, 0.5) 0%,
    rgba(121, 191, 255, 0.5) 49%,
    rgba(10, 36, 79, 0.5) 100%
  );
}
.aureole {
  width: 96.75vh;
  height: 12vh;
  position: absolute;
  left: calc(50% - 48.325vh);
  bottom: -2vh;
  background-image: url(../../assets/images/guide/circle.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.ripple,
.ripple_inner {
  border-radius: 50%;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}
.ripple {
  height: 1vh;
  width: 14.9vh;
  animation-name: rippleA;
  animation-delay: 4s;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(
    rgba(102, 184, 246, 0),
    rgba(102, 184, 246, 0),
    rgba(102, 184, 246, 0.2)
  );
}
.ripple_inner {
  height: 0.5vh;
  width: 7.45vh;
  animation-delay: 2s;
  animation-name: rippleInnerA;
  background: radial-gradient(rgba(102, 184, 246, 0), rgba(102, 184, 246, 0.2));
}
@keyframes rippleInnerA {
  from {
    height: 0.5vh;
    width: 7.45vh;
  }

  to {
    height: 1vh;
    width: 14.9vh;
  }
}
@keyframes rippleA {
  from {
    height: 1vh;
    width: 14.9vh;
  }

  to {
    height: 3vh;
    width: 44.7vh;
  }
}
.menu {
  position: absolute;
  width: 16.2vh;
  height: 24vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.menu > img {
  width: 16.2vh;
  height: 16.2vh;
}
.link_point {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #6981e6;
}

.link_point--last {
  border: 1px solid #6981e6;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes gardenA {
  100% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  90% {
    left: calc(20% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  80% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  70% {
    left: calc(60% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  60% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  50% {
    left: calc(100% - 12.96vh);
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  40% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  30% {
    left: calc(60% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  20% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  10% {
    left: calc(20% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  0% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
}
@keyframes moreA {
  100% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  90% {
    left: calc(60% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  80% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  70% {
    left: calc(100% - 12.96vh);
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  60% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  50% {
    left: calc(60% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  40% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  30% {
    left: calc(20% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  20% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  10% {
    left: calc(20% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  0% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
}
@keyframes parkingA {
  100% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  90% {
    left: calc(100% - 12.96vh);
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  80% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  70% {
    left: calc(60% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  60% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  50% {
    left: calc(20% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  40% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  30% {
    left: calc(20% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  20% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  10% {
    left: calc(60% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  0% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
}
@keyframes driverlessA {
  100% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  90% {
    left: calc(60% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  80% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  70% {
    left: calc(20% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  60% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  50% {
    left: calc(20% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  40% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  30% {
    left: calc(60% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  20% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  10% {
    left: calc(100% - 12.96vh);
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  0% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
}
@keyframes avpA {
  100% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  90% {
    left: calc(20% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  80% {
    left: 0;
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  70% {
    left: calc(20% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  60% {
    left: calc(40% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  50% {
    left: calc(60% - 8.1vh);
    bottom: 1vh;
    z-index: 10;
    transform: scale(1);
  }
  40% {
    left: calc(80% - 7.29vh);
    bottom: 25%;
    z-index: 10;
    transform: scale(0.9);
  }
  30% {
    left: calc(100% - 12.96vh);
    bottom: calc(50% - 2.4vh);
    z-index: 10;
    transform: scale(0.8);
  }
  20% {
    left: calc(80% - 5.67vh);
    bottom: calc(75% - 4.6vh);
    z-index: 1;
    transform: scale(0.7);
  }
  10% {
    left: calc(60% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
  0% {
    left: calc(40% - 4.86vh);
    bottom: calc(100% - 5.8vh);
    z-index: 1;
    transform: scale(0.6);
  }
}
.garden,
.more,
.parking,
.driverless,
.avp {
  animation-iteration-count: infinite;
  animation-duration: 40s;
  animation-delay: 0s;
  animation-timing-function: linear;
}
.garden {
  left: 0;
  bottom: calc(50% - 2.4vh);
  z-index: 10;
  transform: scale(0.8);
  animation-name: gardenA;
}
.more {
  left: calc(40% - 8.1vh);
  bottom: 1vh;
  z-index: 10;
  transform: scale(1);
  animation-name: moreA;
}
.parking {
  left: calc(80% - 7.29vh);
  bottom: 25%;
  z-index: 10;
  transform: scale(0.9);
  animation-name: parkingA;
}
.driverless {
  left: calc(80% - 5.67vh);
  bottom: calc(75% - 4.6vh);
  z-index: 1;
  transform: scale(0.7);
  animation-name: driverlessA;
}

.avp {
  left: calc(40% - 4.86vh);
  bottom: calc(100% - 5.8vh);
  z-index: 1;
  transform: scale(0.6);
  animation-name: avpA;
}
</style>